// 会员系统页面组件

import React, { useState } from 'react';
import './MembershipPage.css';

/**
 * 会员系统页面
 * 展示包月套餐和充值优惠活动
 */
const MembershipPage: React.FC = () => {
  const [activeTab, setActiveTab] = useState<'packages' | 'recharge'>('packages');

  // 包月套餐数据
  const packages = [
    {
      id: 'monthly',
      name: '单月套餐',
      price: 1000,
      duration: '1个月',
      description: '适合短期体验用户',
      popular: false
    },
    {
      id: 'quarterly',
      name: '季度套餐',
      price: 2500,
      duration: '3个月',
      description: '性价比之选',
      popular: true
    },
    {
      id: 'halfyear',
      name: '半年套餐',
      price: 4800,
      duration: '6个月',
      description: '长期使用优选',
      popular: false
    },
    {
      id: 'yearly',
      name: '年费套餐',
      price: 9000,
      duration: '12个月',
      description: '最超值选择',
      popular: false
    }
  ];

  // 充值优惠活动数据
  const rechargeOffers = [
    {
      id: 'offer1',
      amount: 1000,
      bonus: 300,
      description: '充值1000元送300解锁代金券'
    },
    {
      id: 'offer2',
      amount: 3000,
      bonus: 1000,
      description: '充值3000元送1000解锁代金券'
    },
    {
      id: 'offer3',
      amount: 5000,
      bonus: 2000,
      description: '充值5000元送2000解锁代金券'
    },
    {
      id: 'offer4',
      amount: 10000,
      bonus: 5000,
      description: '充值10000元送5000解锁代金券'
    }
  ];

  return (
    <div className="membership-page">
      <div className="membership-header">
        <h1 className="membership-title">会员系统</h1>
        <p className="membership-subtitle">选择适合您的套餐，享受专业足球预测服务</p>
      </div>

      {/* 标签切换 */}
      <div className="membership-tabs">
        <button 
          className={`tab-button ${activeTab === 'packages' ? 'active' : ''}`}
          onClick={() => setActiveTab('packages')}
        >
          包月套餐
        </button>
        <button 
          className={`tab-button ${activeTab === 'recharge' ? 'active' : ''}`}
          onClick={() => setActiveTab('recharge')}
        >
          充值优惠
        </button>
      </div>

      {/* 包月套餐内容 */}
      {activeTab === 'packages' && (
        <div className="packages-section">
          <div className="packages-grid">
            {packages.map(pkg => (
              <div key={pkg.id} className={`package-card ${pkg.popular ? 'popular' : ''}`}>
                {pkg.popular && <div className="popular-badge">推荐</div>}
                <div className="package-header">
                  <h3 className="package-name">{pkg.name}</h3>
                  <div className="package-price">
                    <span className="price-symbol">¥</span>
                    <span className="price-amount">{pkg.price}</span>
                  </div>
                  <div className="package-duration">{pkg.duration}</div>
                </div>
                <div className="package-body">
                  <p className="package-description">{pkg.description}</p>
                  <ul className="package-features">
                    <li>✓ 专业足球预测分析</li>
                    <li>✓ 实时比赛数据更新</li>
                    <li>✓ 专家推荐解锁</li>
                    <li>✓ 7x24小时客服支持</li>
                  </ul>
                </div>
                <div className="package-footer">
                  <button className="purchase-btn">
                    立即购买
                  </button>
                </div>
              </div>
            ))}
          </div>
          
          <div className="packages-note">
            <h4>套餐说明：</h4>
            <ul>
              <li>• 充值的钱可以购买会员套餐，也可以用于解锁功能</li>
              <li>• 代金券只能用于解锁功能，不能购买会员</li>
              <li>• 所有套餐均享受相同的服务内容</li>
              <li>• 套餐到期后可续费或升级</li>
            </ul>
          </div>
        </div>
      )}

      {/* 充值优惠内容 */}
      {activeTab === 'recharge' && (
        <div className="recharge-section">
          <div className="recharge-intro">
            <h3>充值优惠活动</h3>
            <p>充值越多，赠送越多！充值金额可购买会员或解锁功能，代金券仅限解锁使用。</p>
          </div>
          
          <div className="recharge-grid">
            {rechargeOffers.map(offer => (
              <div key={offer.id} className="recharge-card">
                <div className="recharge-header">
                  <div className="recharge-amount">
                    <span className="amount-label">充值</span>
                    <span className="amount-value">¥{offer.amount}</span>
                  </div>
                  <div className="bonus-amount">
                    <span className="bonus-label">赠送</span>
                    <span className="bonus-value">¥{offer.bonus}</span>
                    <span className="bonus-type">代金券</span>
                  </div>
                </div>
                <div className="recharge-body">
                  <p className="recharge-description">{offer.description}</p>
                  <div className="recharge-total">
                    <span>实际到账：¥{offer.amount + offer.bonus}</span>
                  </div>
                </div>
                <div className="recharge-footer">
                  <button className="recharge-btn">
                    立即充值
                  </button>
                </div>
              </div>
            ))}
          </div>
          
          <div className="recharge-note">
            <h4>充值说明：</h4>
            <ul>
              <li>• 充值金额：可用于购买会员套餐或解锁功能</li>
              <li>• 赠送代金券：仅限用于解锁功能，不可购买会员</li>
              <li>• 充值金额和代金券永久有效，无过期时间</li>
              <li>• 优惠活动长期有效，随时可参与</li>
            </ul>
          </div>
        </div>
      )}
    </div>
  );
};

export default MembershipPage;